<template>
	<view class="container">
		<com-head :textTit="textTit" :typeVal="1"></com-head>
		<!-- {{type}} -->
		<view class="common birthday" v-if="type == 3">
			<text class="title">{{details.title}}</text>
			<view class="contents">
				{{details.content}}
			</view>
			<image src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/07/-22x.png" mode="aspectFill"></image>
			<view class="time">{{details.create_time}}</view>
		</view>
		<view class="common orderMessage"  v-if="type == 2">
			<template v-if="details.orders.goods.length">
				<!-- <text class="title" v-if="details.orders">{{getStatusText(details.orders.status)}}</text> -->
				<view v-for="(ele,index) in list" :key="index" class="plsBg">
					<view class="plsBg-title">{{getStatusText(ele.status)}}</view>
					<view class="detals" >
						<image :src="ele.goods_images[0]" mode=""></image>
						<view class="right">
							<view class="">
								订单编号：<text>{{details.orders.out_trade_no}}</text>
							</view>
							<view class="">
								购买商品：<text>{{ele.goods_name}}</text>
							</view>
							<view class="" v-if="details.orders.pay_time">
								完成时间：<text>{{details.orders.pay_time}}</text>
							</view>
							<view class="">
								服务偏好：<text>{{details.user.service_preference || "无"}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="detals" v-for="(ele,index) in list" :key="index">
					<image :src="ele.project_images[0]" mode=""></image>
					<view class="right">
						<view class="">
							订单编号：<text>{{details.orders.out_trade_no}}</text>
						</view>
						<view class="">
							服务项目：<text>{{ele.project_name}}</text>
						</view>
						<view class="" v-if="details.orders.pay_time">
							完成时间：<text>{{details.orders.pay_time}}</text>
						</view>
						<view class="">
							服务偏好：<text>{{details.user.service_preference || "无"}}</text>
						</view>
					</view>
				</view>
			</template>
		</view>
		<view class="common expenseMessage" v-if="type == 1 && details.id" >
			<view class="price">-{{details.orders.orders_payable}}</view>
			<view class="vipPrice">会员卡余额 {{userInfo.coupon}} 元</view>
			<view class="list">
				当前状态：<text>支付成功</text>
			</view>
			<view class="list">
				当前订单：<text>{{details.orders.out_trade_no}}</text>
			</view>
			<view class="list" v-if="details.orders.pay_time">
				支付时间：<text>{{details.orders.pay_time}}</text>
			</view>
			<view class="list">
				支付方式：<text>会员卡</text>
			</view>
			
		</view>
		<view class="common expenseMessage" v-if="type == 4 && details.id" >
			<view class="price">-{{details.reward.money}}</view>
			<!-- <view class="vipPrice">会员卡余额 566.00 元</view> -->
			<view class="list">
				当前状态：<text>支付成功</text>
			</view>
			<!-- <view class="list">
				当前订单：<text>{{details.orders.out_trade_no}}</text>
			</view>
			<view class="list" v-if="details.orders.pay_time">
				支付时间：<text>{{details.orders.pay_time}}</text>
			</view> -->
			<view class="list">
				支付方式：<text>会员卡</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				type:2,//3是生日 2 是订单  1是消费 4是打赏
				id:'',
				details:{},
				list:[],
				textTit: '开票记录'
			}
		},
		async onLoad(option) {
			if(option.type){
				this.type = option.type
				console.log(45, this.type)
				switch(this.type){
					case '1':
						this.textTit = '消费通知详情'
						break;
					case '2':
						this.textTit = '订单通知详情'
						break;
					case '3':
						this.textTit = '消息详情'
						break;
					case '4':
						this.textTit = '支付结果'
						break;
					default:
						this.textTit = '开票记录'
						break;
				}
			}
			this.id = option.id
			this.getDetails()
		},
		methods: {
			getStatusText(val){
				switch(val){
					case 1 :
					return '待付款'
					case 2 :
					return '待发货'
					case 3 :
					return '待收货'
					case 4 :
					return '已完成'
					case 5 :
					return '已取消'
					case 6 :
					return '退款中'
					case 7 :
					return '已退款'
					case 8 :
					return '已评价'
					case 9 :
					return '部分退款'
					case 10 :
					return '待消费'
				}
			},
			async getDetails(){
				let {code,data} = await this.$u.api.getMessage({id:this.id});
				if(code){
					let arr = [] 
					if(data.orders && data.orders.project.length){
						data.orders.project.forEach((ele)=>{
							arr.push(ele)
							ele.project_images = ele.project_images.split(",")
						})
					}
					if (data.orders && data.orders.goods.length){
						data.orders.goods.forEach((ele)=>{
							arr.push(ele)
							ele.goods_images = ele.goods_images.split(",")
						})
					}
						
					this.list = arr
					console.log(this.list)
					this.details = data
				}
			}
		}
	}
</script>

<style lang="scss" scoped >

.plsBg{
	background: white;
	border-radius: 15rpx;
	&-title{
		padding: 20rpx 0 0 32rpx;
	}
}
.container{
	padding: 50rpx 32rpx;
	.common{
		
		.title{
			font-size: 24rpx;
			color: #333333;
			line-height: 26rpx;
		}
	}
	.expenseMessage{
		padding: 51rpx 32rpx 68rpx 32rpx;
		margin-bottom: 30rpx;
		background: white;
		border-radius: 15rpx;
		.price{
			text-align: center;
			font-size: 40rpx;
			font-weight: 600;
			color: #333333;
			line-height: 44rpx;
			margin-bottom: 32rpx;
			margin-left: 10rpx;
		}
		.vipPrice{
			text-align: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 26rpx;
			margin: 20rpx 0 60rpx 0;
		}
		.list{
			font-size: 24rpx;
			color: #999999;
			line-height: 26rpx;
			margin-bottom: 18rpx;
			text{
				color: #333333;
				margin-left: 18rpx;
			}
		}
		.list:last-child{
			margin-bottom: 0;
		}
		
	}
	.orderMessage{
		// margin-bottom: 30rpx;
		.detals{
			padding: 15rpx 30rpx 30rpx 30rpx;
			display: flex;
			font-size: 24rpx;
			color: #999999;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 15rpx;
			.right{
				width: 470rpx;
				>view{
					margin-bottom: 19rpx;
					&:last-child{
						margin-bottom: 0;
					}
				}
			}
			text{
				color: #333333;
			}
			image{
				width: 174rpx;
				height: 174rpx;
				margin-right: 25rpx;
				flex: none;
				border-radius: 10rpx;
			}
		}
	}
	.birthday{
		padding: 40rpx 44rpx 59rpx 36rpx;
		background: white;
		.contents{
			font-size: 24rpx;
			color: #666666;
			line-height: 42rpx;
			margin: 42rpx 0;
		}
		image{
			width: 606rpx;
			height: 606rpx;
			margin-bottom: 42rpx;
		}
		.time{
			font-size: 20rpx;
			text-align: right;
			color: #333333;
			line-height: 28rpx;
		}
	}
}

</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
